<#assign menu="appUser">
<#assign submenu="appUser_list">
<#include "/system/head.ftl">
<style type="text/css" xmlns="http://www.w3.org/1999/html">
    .pagination {
        border-radius: 4px;
        display: inline-block;
        margin: 0;
        padding-left: 0;
    }

    /* Portlet */
    .portlet > .portlet-body.green,
    .portlet.green {
        background-color: white;
    }


    table tr{
        text-align: center;
    }

    th{
        text-align: center;
    }

    .search{
        width: 200px;
    }

</style>

<body>

<section id="main-content">
    <section class="wrapper">
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet box grey-cascade">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="fa fa-globe"></i>Managed Table
                            </div>
                            <div class="tools">
                                <a href="javascript:;" class="collapse">
                                </a>
                                <a href="javascript:;" class="reload">
                                </a>
                                <a href="javascript:;" class="remove">
                                </a>
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div class="table-toolbar">
                                <div class="btn-group">
                                    <a href="${basePath}/admin/appUser/add.htm" class="btn green" id="sample_editable_1_new">
                                        Add New <i class="fa fa-plus"></i>
                                    </a>
                                </div>
                            </div>

                            <table class="table table-striped table-bordered table-hover" id="sample_1">
                                <thead>
                                <tr>
                                    <th class="table-checkbox">
                                        <input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes"/>
                                    </th>
                                    <th>名字</th>
                                    <th>手机号</th>
                                    <th>
                                        微信/微博
                                    </th>
                                    <th>性别</th>


                                    <th>职位</th>
                                    <th>兴趣</th>

                                    <th>用户类型</th>
                                    <th>状态</th>
                                    <th>是否红人</th>
                                    <th>操作</th>

                                </tr>
                                </thead>
                                <tbody>


                                <#list appUserList as e>
                                <tr class="gradeA odd">

                                    <td>
                                        <input type="checkbox" class="checkboxes" value="1"/>
                                    </td>

                                    <td>
                                    ${e.name}
                                    </td>
                                    <td>${e.phone!}</td>
                                    <td>${e.weChatId!}</td>
                                    <td>
                                        <#if e.gender==1> 男</#if>
                                        <#if e.gender==0> 女</#if>
                                    </td>
                                    <td>${e.profession}</td>
                                    <td>${e.interests}</td>
                                    <td>
                                        <#if e.type==0> 手机</#if>
                                        <#if e.type=1> 微信</#if>
                                        <#if e.type=2> 微博</#if>
                                        <#if e.type=3> 系统</#if>
                                    </td>

                                    <td>
                                        <#if e.available==1>
                                            <span class="label label-sm label-success">在用</span>
                                        </#if>
                                        <#if e.available==0>
                                            <span class="label label-sm label-default">禁用</span>
                                        </#if>
                                    </td>
                                    <td>
                                        <#if e.isHot==1>
                                            <span class="label label-sm label-success">是</span>
                                        <#else>
                                            <span class="label label-sm label-default">否</span>
                                        </#if>

                                    </td>
                                    <td>
                                        <#if e.available==1>
                                            <a href="javascript:void(0);"
                                               class="js_appUser_cancel btn btn-sm blue"
                                               appUserId="${e.id}"
                                               title="是否禁用此账号">
                                                禁用账号
                                            </a>
                                        <#elseif e.available==0>
                                            <a href="javascript:void(0);"
                                               class="js_appUser_on btn btn-sm blue"
                                               appUserId="${e.id}"
                                               title="是否启用此账号">
                                                启用账号
                                            </a>
                                        </#if>

                                        <#if e.isHot==1>
                                            <a href="javascript:void(0);"
                                               class="js_hot_cancel btn btn-sm blue"
                                               appUserId="${e.id}"
                                               title="是否取消红人">
                                                取消红人
                                            </a>
                                        <#else >
                                            <a href="javascript:void(0);"
                                               class="js_hot_set btn btn-sm blue" appUserId="${e.id}"
                                               title="是否设为红人">
                                                设为红人
                                            </a>
                                        </#if>

                                        <a href="javascript:void(0);"
                                           class="js_appUser_delete btn btn-sm red"
                                           appUserId="${e.id}"
                                           title="删除此账号">
                                            删除
                                        </a>

                                    </td>
                                </tr>
                                </#list>

                                </tbody>
                            </table>

                            <div class="page-header position-relative">
                                <table style="width: 100%">
                                    <tbody>
                                    <tr>
                                        <td style="vertical-align: top;"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- END EXAMPLE TABLE PORTLET-->
                </div>
            </div>
     </section>
</section>
</body>



<#include "../foot.ftl">

<script>
    var TableManaged = function () {
        return {
            //main function to initiate the module
            init: function () {
                if (!jQuery().dataTable) {
                    return;
                }
                // begin first table
                $('#sample_1').dataTable({
                    "aoColumns": [
                        { "bSortable": false },
                        { "bSortable": false },
                        { "bSortable": false },
                        { "bSortable": false},
                        { "bSortable": true},
                        { "bSortable": false},
                        { "bSortable": false},
                        { "bSortable": false},
                        { "bSortable": false},
                        { "bSortable": false},
                        { "bSortable": false}
                    ],
                    "aLengthMenu": [
                        [5, 15, 20, -1],
                        [5, 15, 20, "All"] // change per page values here
                    ],
                    // set the initial value
                    "iDisplayLength": 5,
                    "sPaginationType": "bootstrap",
                    "oLanguage": {
                        "sSearch": "搜索:",
                        "sLengthMenu": "每页显示 _MENU_ 条记录",
                        "sZeroRecords": "Nothing found - 没有记录",
                        "sInfo": "显示第  _START_ 条到第  _END_ 条记录,一共  _TOTAL_ 条记录",
                        "sInfoEmpty": "显示0条记录",
                        "oPaginate": {
                            "sPrevious": " 上一页 ",
                            "sNext": " 下一页 ",
                        }
                    },
                    "aoColumnDefs": [
                        { 'bSortable': false, 'aTargets': [0] },
                        { "bSearchable": false, "aTargets": [ 0 ] }
                    ]
                });

                jQuery('#sample_1 .group-checkable').change(function () {
                    var set = jQuery(this).attr("data-set");
                    var checked = jQuery(this).is(":checked");
                    jQuery(set).each(function () {
                        if (checked) {
                            $(this).attr("checked", true);
                            $(this).parents('tr').addClass("active");
                        } else {
                            $(this).attr("checked", false);
                            $(this).parents('tr').removeClass("active");
                        }
                    });
                    jQuery.uniform.update(set);
                });

                jQuery('#sample_1').on('change', 'tbody tr .checkboxes', function(){
                    $(this).parents('tr').toggleClass("active");
                });

                jQuery('#sample_1_wrapper .dataTables_filter input').addClass("form-control input-medium input-inline"); // modify table search input
                jQuery('#sample_1_wrapper .dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown
                //jQuery('#sample_1_wrapper .dataTables_length select').select2(); // initialize select2 dropdown

                // begin second table
                $('#sample_2').dataTable({
                    "aLengthMenu": [
                        [5, 15, 20, -1],
                        [5, 15, 20, "All"] // change per page values here
                    ],
                    // set the initial value
                    "iDisplayLength": 5,
                    "sPaginationType": "bootstrap",
                    "oLanguage": {
                        "sLengthMenu": "_MENU_ records",
                        "oPaginate": {
                            "sPrevious": "Prev",
                            "sNext": "Next"
                        }
                    },
                    "aoColumnDefs": [
                        { 'bSortable': false, 'aTargets': [0] },
                        { "bSearchable": false, "aTargets": [ 0 ] }
                    ]
                });

                jQuery('#sample_2 .group-checkable').change(function () {
                    var set = jQuery(this).attr("data-set");
                    var checked = jQuery(this).is(":checked");
                    jQuery(set).each(function () {
                        if (checked) {
                            $(this).attr("checked", true);
                        } else {
                            $(this).attr("checked", false);
                        }
                    });
                    jQuery.uniform.update(set);
                });

                jQuery('#sample_2_wrapper .dataTables_filter input').addClass("form-control input-small input-inline"); // modify table search input
                jQuery('#sample_2_wrapper .dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown
                jQuery('#sample_2_wrapper .dataTables_length select').select2(); // initialize select2 dropdown

                // begin: third table
                $('#sample_3').dataTable({
                    "aLengthMenu": [
                        [5, 15, 20, -1],
                        [5, 15, 20, "All"] // change per page values here
                    ],
                    // set the initial value
                    "iDisplayLength": 5,
                    "sPaginationType": "bootstrap",
                    "oLanguage": {
                        "sLengthMenu": "_MENU_ records",
                        "oPaginate": {
                            "sPrevious": "Prev",
                            "sNext": "Next"
                        }
                    },
                    "aoColumnDefs": [
                        { 'bSortable': false, 'aTargets': [0] },
                        { "bSearchable": false, "aTargets": [ 0 ] }
                    ]
                });

                jQuery('#sample_3 .group-checkable').change(function () {
                    var set = jQuery(this).attr("data-set");
                    var checked = jQuery(this).is(":checked");
                    jQuery(set).each(function () {
                        if (checked) {
                            $(this).attr("checked", true);
                        } else {
                            $(this).attr("checked", false);
                        }
                    });
                    jQuery.uniform.update(set);
                });

                jQuery('#sample_3_wrapper .dataTables_filter input').addClass("form-control input-small input-inline"); // modify table search input
                jQuery('#sample_3_wrapper .dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown
                jQuery('#sample_3_wrapper .dataTables_length select').select2(); // initialize select2 dropdown

            }
        };
    }();
    TableManaged.init();
</script>


<script>
    $(function () {
        $('.js_appUser_cancel').click(function () {
            var appUserId = $(this).attr('appUserId');
            var status = "trash";
            bootbox.dialog({
                message: $(this).attr('title'),
                title: "提示",
                buttons: {
                    "delete": {
                        label: "确定",
                        className: "btn-success",
                        callback: function () {
                            $.post("${basePath}/admin/appUser/takeOff.json", {"appUserId": appUserId}, function (data) {
                                window.location.reload();
                            }, "json");
                        }
                    },
                    "cancel": {
                        label: "取消",
                        className: "btn-primary",
                        callback: function () {

                        }
                    }
                }
            });
        });

        $('.js_appUser_on').click(function () {
            var appUserId = $(this).attr('appUserId');
            var status = "trash";
            bootbox.dialog({
                message: $(this).attr('title'),
                title: "提示",
                buttons: {
                    "delete": {
                        label: "确定",
                        className: "btn-success",
                        callback: function () {
                            $.post("${basePath}/admin/appUser/getOn.json", {"appUserId": appUserId}, function (data) {
                                window.location.reload();
                            }, "json");
                        }
                    },
                    "cancel": {
                        label: "取消",
                        className: "btn-primary",
                        callback: function () {

                        }
                    }
                }
            });
        });

        $('.js_appUser_delete').click(function () {
            var appUserId = $(this).attr('appUserId');
            var status = "trash";
            bootbox.dialog({
                message: $(this).attr('title'),
                title: "提示",
                buttons: {
                    "delete": {
                        label: "确定",
                        className: "btn-success",
                        callback: function () {
                            $.post("${basePath}/admin/appUser/delete.json", {"appUserId": appUserId}, function (data) {
                                window.location.reload();
                            }, "json");
                        }
                    },
                    "cancel": {
                        label: "取消",
                        className: "btn-primary",
                        callback: function () {

                        }
                    }
                }
            });
        });


        $('.js_hot_set').click(function () {
            var appUserId = $(this).attr('appUserId');
            var status = "trash";
            bootbox.dialog({
                message: $(this).attr('title'),
                title: "提示",
                buttons: {
                    "delete": {
                        label: "确定",
                        className: "btn-success",
                        callback: function () {
                            $.post("${basePath}/admin/appUser/hotSet.json", {"appUserId": appUserId}, function (data) {
                                window.location.reload();
                            }, "json");
                        }
                    },
                    "cancel": {
                        label: "取消",
                        className: "btn-primary",
                        callback: function () {

                        }
                    }
                }
            });
        });

        $('.js_hot_cancel').click(function () {
            var appUserId = $(this).attr('appUserId');
            var status = "trash";
            bootbox.dialog({
                message: $(this).attr('title'),
                title: "提示",
                buttons: {
                    "delete": {
                        label: "确定",
                        className: "btn-success",
                        callback: function () {
                            $.post("${basePath}/admin/appUser/hotCancel.json", {"appUserId": appUserId}, function (data) {
                                window.location.reload();
                            }, "json");
                        }
                    },
                    "cancel": {
                        label: "取消",
                        className: "btn-primary",
                        callback: function () {

                        }
                    }
                }
            });
        });





    });
</script>


